<template>
	<view>
		<!-- 游记内容 -->
		<view class="travelList" >
			<view class="travelItem" v-for="(item, index) in travelList" :key="index" @click.prevent="navtoTravelDetails(item.post_id)">
				<view class="header flex flexBei">
					<text class="time">{{item.create_time.slice(0, 16)}} </text>
					<view class="edit">
						<view class="iconfont icon-shanchu inview" @click.stop="showModel(item.post_id)"></view>
					</view>
				</view>
				<view class="content flex flexBei">
					<image :src="item.picture.split(';')[0]" ></image>
					<view class="details textHd4">
						{{item.post_content | emojoy}}
					</view>
				</view>
				<view class="bottom flex">
					<view class="icon">
						{{item.category}}
					</view>
					<view class="icon">
						<view class="iconfont icon-zan inview"></view>
						<text>{{item.likes > 999? '999+' : item.likes}}</text>
				   </view>
				</view>
			</view>
		</view>
		<!-- 空白 -->
		<u-empty  text="暂无游记" mode="list" margin-top="240" v-show="(this.travelList.length == 0)"></u-empty>
		<!-- 弹出层 -->
		<u-modal v-model="show"  show-cancel-button @confirm="deleteTravel">
					<view class="slot-content" style="font-size: 28rpx;padding: 0 24rpx;line-height: 72rpx;">
						你将会永久删除这条游记，是否继续?
					</view>
		</u-modal>
		<!-- 语句提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { gettravel, deletetravel } from '../../api/travel.js'
	export default {
		data() {
			return {
				params: {
				  userId: '',
				  pageNum: 1,
				  pageSize: 4
				},
				deleteId: '',
				show:false,
				total: '',
				travelList: []
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '游记'
			})	
		},
		onReachBottom() {
			if (this.total > (this.params.pageNum *this.params.pageSize)) {
				 this.getMore()
			} else {
				this.$refs.uToast.show({
					position: 'top',
					title: '没有更多数据了'
				})
			}
		},
		mounted() {
			this.getTravelList()
		},
		methods: {
			// 删除游记
			async deleteTravel () {
				const res = await deletetravel(this.deleteId)
				this.params.pageNum = 1
				this.getTravelList()
				this.$store.dispatch('getUserInfo')
			},
			// 获取游记
			async getTravelList () {
				this.params.userId = this.$store.state.userinfo.userId
				const res = await gettravel(this.params)
				this.total = res.data.data.total
				this.travelList = res.data.data.data
				
			},
			// 弹出层
			showModel (id) {
				this.show = true
				this.deleteId = id
			},
			// 跳转到详情页
			navtoTravelDetails (id) {
				uni.navigateTo({
					url: `../travel_details/travel_details?id=${id}`
				})
			},
			// 获取更多游记
			async getMore() {
				this.params.pageNum++
				const res = await gettravel(this.params)
				this.travelList = [...this.travelList, ...res.data.data.data]
			}
		}
		
	}
</script>

<style lang="scss" scoped>
/* 游记内容 */
</style>
